<template>
  <div class="repair">
    <div class="screen_box">
      <div class="select_box">
        <div class="select_li">
          <el-select v-model="statusData" placeholder="请选择" size="mini" @change="selectStatus">
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="select_li">
          <el-select v-model="yearData" placeholder="请选择" size="mini" @change="selectYear">
            <el-option v-for="item in yearOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="select_li" v-if="['3', '4'].includes(firstType)">
          <el-input
            placeholder="请输入内容搜索"
            v-model="reimburseReason"
            class="input-with-select"
            size="mini"
            clearable
            @keyup.enter.native="selectFun">
            <el-button slot="append" icon="el-icon-search" size="mini" @click="selectFun">搜索</el-button>
          </el-input>
        </div>
      </div>
      <div class="search_box" v-if="['1', '2'].includes(firstType)">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="goAdd" v-if="firstType === '1'">
          出差审批表
        </el-button>
        <template v-if="firstType === '2'">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="goAdd">差旅费报销单</el-button>
        </template>
      </div>
    </div>
    <div class="list_con" v-if="listData.length">
      <div class="infor_left">
        <el-scrollbar class="info_left">
          <div class="left_con_list">
            <div
              class="infor_left_one"
              :class="{ is_select: activeInfo.id === item.id }"
              @click="lookOne(item)"
              v-for="item in listData"
              :key="item.id">
              <div class="one_con">
                <div class="info_text" v-if="['1', '2'].includes(item.formType)">
                  {{ item.reimburseReason || item.formTitle }}
                </div>
                <div class="info_text" v-if="item.formType === '3'">{{ item.formTitle }}</div>
                <div class="info_status" v-if="item.saveStatus === '0'">暂存</div>
                <div class="info_status" v-if="item.saveStatus === '1'">
                  {{ item.status | formStatus }}
                </div>
              </div>
              <div class="one_con con_bottom">
                <div class="info_org">{{ item.orgName }}</div>
                <div class="info_time">{{ item.createTime }}</div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <el-pagination
          background
          layout="pager,total"
          :current-page="pagenation.currentPage"
          :page-size="pagenation.pageSize"
          :total="pagenation.totalSize"
          @current-change="onPageChange"
          hide-on-single-page
          :pager-count="5"></el-pagination>
      </div>

      <div class="infor_right">
        <list-detail-check
          :firstType="firstType"
          :userType="userType"
          :activeInfo="activeInfo"
          @addSuccess="addSuccess"
          ref="listDetailCheck"
          v-if="['1', '3'].includes(firstType)"
          @editDia="editDia"></list-detail-check>
        <list-detail-audit
          :firstType="firstType"
          :userType="userType"
          :activeInfo="activeInfo"
          @addSuccess="addSuccess"
          ref="listDetailAudit"
          v-if="['4', '2'].includes(firstType) && activeInfo.formType === '2'"
          @editDia="editDia"></list-detail-audit>
      </div>
    </div>
    <div class="list_con" v-else>
      <div class="full_no">暂无申请数据</div>
    </div>
    <!-- 新建 start -->
    <XnDialog
      :title="firstType === '1' ? '出差审批表' : '差旅费报销单'"
      :visible.sync="inforDiaShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="70%"
      top="5vh"
      class="branch_dialog"
      @closed="cancelData">
      <expense-add-check
        v-if="inforDiaShow && firstType === '1'"
        @addSuccess="addSuccessDia"
        @cancelData="cancelData"
        :formData="formData"
        :userAllList="userAllList" />
      <expense-add-audit
        v-if="inforDiaShow && firstType === '2'"
        @addSuccess="addSuccessDia"
        @cancelData="cancelData"
        :userAllList="userAllList"
        :formData="formData" />
    </XnDialog>
    <!-- 新建 end -->
  </div>
</template>

<script>
import { getlistTripReimburseApplys, getlistTripReimburseConfirm, getAllUserList } from '@apis/api-dailyManage.js'
import listDetailCheck from './listDetailCheck' // 出差审批表
import listDetailAudit from './listDetailAudit' // 差旅费报销单
import expenseAddCheck from './expenseAddCheck.vue'
import expenseAddAudit from './expenseAddAudit.vue'
import moment from 'moment'
import XnDialog from '@com/xnDialog.vue'
import { selectYearFun } from '@utility/utility.js'
export default {
  name: 'applyList',
  components: {
    listDetailCheck,
    expenseAddCheck,
    expenseAddAudit,
    listDetailAudit,
    XnDialog,
  },
  props: {
    userType: {
      type: String,
      default: '',
    },
    firstType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      load: true,
      activeInfo: {},
      statusOptions: [
        {
          value: '',
          label: '全部',
        },
        {
          value: '0',
          label: '待审批',
        },
        {
          value: '1',
          label: '通过',
        },
        {
          value: '2',
          label: '不通过',
        },
        {
          value: '3',
          label: '退回',
        },
        {
          value: '4',
          label: '已撤回',
        },
        {
          value: '5',
          label: '已终止',
        },
      ],
      statusData: '',
      yearOption: [
        {
          value: '2023',
          label: '2023年',
        },
      ],
      yearData: moment().format('YYYY'),
      pagenation: {
        currentPage: 1,
        pageSize: 10,
        totalSize: 0,
      },
      inforDiaShow: false,
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),
      pageList: [],
      checkList: [],
      listData: [],
      infoDiaShow: false,
      formData: {},
      userAllList: [],
      reimburseReason: '',
      selectYearFun,
    }
  },
  computed: {},
  filters: {
    formStatus(val) {
      switch (val) {
        case '0':
          return '待审批'
        case '1':
          return '审批通过'
        case '2':
          return '审批不通过'
        case '3':
          return '审批退回'
        case '4':
          return '已撤回'
        case '5':
          return '已终止'
        default:
          break
      }
    },
  },
  watch: {
    firstType(news) {
      this.statusData = ''
      this.reimburseReason = ''
      this.pagenation.currentPage = 1
      if (news === '2' || news === '4') {
        this.statusOptions = [
          {
            value: '',
            label: '全部',
          },
          {
            value: '0',
            label: '待审批',
          },
          {
            value: '1',
            label: '通过',
          },
          {
            value: '2',
            label: '不通过',
          },
          {
            value: '3',
            label: '退回',
          },
          {
            value: '4',
            label: '已撤回',
          },
          {
            value: '5',
            label: '已终止',
          },
        ]
      } else {
        this.statusOptions = [
          {
            value: '',
            label: '全部',
          },
          {
            value: '0',
            label: '待审批',
          },
          {
            value: '1',
            label: '已审批',
          },
        ]
      }
      this.getData()
    },
    pageList: {
      handler(news) {
        this.listData = news
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.yearOption = this.selectYearFun(2023)
    this.activeInfo.id = this.$route.query.id || ''
    this.getData('1')
  },
  mounted() {
    if (!this.userAllList.length) {
      this.getAllUserList()
    }
  },
  methods: {
    getData(type) {
      if (this.firstType === '1' || this.firstType === '2') {
        this.getlistTripReimburseApplys(type)
      } else if (this.firstType === '3' || this.firstType === '4') {
        this.getlistTripReimburseConfirm(type)
      }
    },
    selectYear() {
      this.pagenation.currentPage = 1
      this.getData()
    },
    selectStatus() {
      this.pagenation.currentPage = 1
      this.getData()
    },
    lookOne(item) {
      this.activeInfo = item
    },
    onPageChange(e) {
      this.pagenation.currentPage = e
      this.getData()
    },
    addSuccess(data) {
      if (!this.formData.id && data !== 'detail') {
        this.pagenation.currentPage = 1
      }
      this.inforDiaShow = false
      this.infoDiaShow = false
      this.getData()
    },
    cancelData() {
      this.inforDiaShow = false
      this.infoDiaShow = false
    },
    goAdd() {
      this.formData = {}
      this.inforDiaShow = true
    },
    getlistTripReimburseApplys(type) {
      const param = {
        status: this.statusData,
        year: this.yearData,
        current: this.pagenation.currentPage,
        size: this.pagenation.pageSize,
        tenantId: localStorage.pskh_tenantId,
        formType: this.firstType,
      }
      getlistTripReimburseApplys(param).then(res => {
        if (res.code === 0) {
          this.pageList = res.data.records
          this.pagenation.totalSize = res.data.total
          // this.activeInfo = res.data.records[0]
          if (this.$route.query.id && type === '1') {
            this.pagenation.currentPage = res.data.current
            const arr = this.pageList.filter(item => {
              return item.id === this.$route.query.id
            })
            this.activeInfo = arr[0]
          } else {
            let arr1 = []
            if (this.activeInfo && this.activeInfo.id) {
              const arr = this.pageList.filter(item => {
                return item.id === this.activeInfo.id
              })
              if (arr.length) {
                arr1 = arr
              }
            }
            if (arr1.length) {
              this.activeInfo = arr1[0]
            } else {
              this.activeInfo = res.data.records[0]
            }
          }
        }
      })
    },
    operate() {
      if (this.pageList.length === 1 && this.pagenation.currentPage > 1) {
        this.pagenation.currentPage--
      }
      this.getlistTripReimburseApplys()
    },
    getlistTripReimburseConfirm(type) {
      const param = {
        id: type === '1' ? this.activeInfo.id : '',
        year: this.yearData,
        current: this.pagenation.currentPage,
        size: this.pagenation.pageSize,
        status: this.statusData,
        tenantId: localStorage.pskh_tenantId,
        formType: this.firstType === '3' ? '1' : '2',
        reimburseReason: this.reimburseReason,
      }
      getlistTripReimburseConfirm(param).then(res => {
        if (res.code === 0) {
          this.pageList = res.data.records
          this.pagenation.totalSize = res.data.total
          if (this.$route.query.id && type === '1') {
            this.pagenation.currentPage = res.data.current
            const arr = this.pageList.filter(item => {
              return item.id === this.$route.query.id
            })
            this.activeInfo = arr[0]
          } else {
            let arr1 = []
            if (this.activeInfo && this.activeInfo.id) {
              const arr = this.pageList.filter(item => {
                return item.id === this.activeInfo.id
              })
              if (arr.length) {
                arr1 = arr
              }
            }
            if (arr1.length) {
              this.activeInfo = arr1[0]
            } else {
              this.activeInfo = res.data.records[0]
            }
          }
        }
      })
    },
    editDia(data) {
      this.formData = data
      if (data.formType === '3') {
        this.infoDiaShow = true
      } else {
        this.inforDiaShow = true
      }
    },
    getAllUserList() {
      getAllUserList().then(res => {
        const data = res.data
        const i = data.findIndex(item => {
          return item.userId === this.userInfo.userId
        })
        data.splice(i, 1)

        this.userAllList = data
      })
    },
    selectFun() {
      this.getlistTripReimburseConfirm()
    },
    addSuccessDia(data) {
      this.pagenation.currentPage = 1
      this.activeInfo = {}
      this.inforDiaShow = false
      this.infoDiaShow = false
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped>
.repair {
  height: 100%;
  .screen_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 52px;
    border-bottom: 1px solid #efefef;
    // // box-shadow: 0 3px 5px 0 rgba(2, 2, 2, 0.1);
    .select_box {
      display: flex;
      align-items: center;
      .select_li {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .el-select {
          width: 150px;
        }
      }
    }
  }
  .list_con {
    height: calc(100% - 70px);
    display: flex;
    margin-top: 2px;
    .infor_left {
      height: calc(100% - 20px);
      width: 300px;
      margin: 10px;
      border: 1px solid #e5e5e5;
      .info_left {
        height: calc(100% - 50px);
        overflow-y: auto;
      }
      .left_con_list {
        margin: 10px 0;
        padding: 0 10px;
        .infor_left_one {
          padding: 5px 8px;
          cursor: pointer;
          margin-bottom: 10px;
          background-color: #f9f9f9;
          .one_con {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 5px 0;
            .info_text {
              font-size: 15px;
              word-break: break-all;
              white-space: pre-wrap;
              .temp {
                color: #7497c8;
              }
              /deep/.el-checkbox__label {
                white-space: pre-wrap;
              }
            }
            .info_status {
              color: #f59a23;
              padding-left: 10px;
              white-space: nowrap;
            }
            .info_org {
              background-color: #fdeed7;
              border-radius: 4px;
              padding: 2px 6px;
              font-size: 14px;
              color: #86642c;
              word-break: keep-all;
            }
          }
          .con_bottom {
            margin-top: 15px;
          }
        }
        .is_select {
          background-color: #e4ebf0;
        }
      }
    }
    .el-pagination {
      text-align: right;
      margin-top: 10px;
    }
    .infor_right {
      height: calc(100% - 20px);
      width: calc(100% - 300px);
      margin: 10px 0;
      border: 1px solid #e5e5e5;
    }
    .full_no {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999999;
    }
  }
  .branch_dialog {
    /deep/.el-dialog {
      padding-bottom: 10px;
    }
    /deep/.el-dialog__body {
      max-height: 500px;
      overflow-y: auto;
    }
  }
}
</style>
